{% extends 'ApiCloud/Base/layout.common.html.twig' %}

{% block main %}
    {% include "ApiCloud/Base/inc.head.light.html.twig" with {title:"物料录入",back:1} %}
    <mu-tabs :value.sync="tab" color="amber600" indicator-color="amber600" inverse center>
        <mu-tab>所有物料</mu-tab>
        <mu-tab>录入物料</mu-tab>
    </mu-tabs>
    <div class="pad10" v-if="tab == 1">
        <mu-form ref="form" :model="en" label-position="top" label-width="100">

            <div class="fs10 padl5 padr5">
                <mu-form-item label="名称" :rules="[rules.notNull]" prop="name">
                    <mu-text-field v-model="en.name"></mu-text-field>
                </mu-form-item>
                <mu-form-item label="规格" :rules="[rules.notNull]" prop="guiGe">
                    <mu-select v-model="en.guiGe" full-width>
                        <mu-option v-for="item,index in guige"
                                   :key="item.id" :label="item.name" :value="item.id"></mu-option>
                    </mu-select>
                </mu-form-item>
                <mu-form-item label="单位" :rules="[rules.notNull]" prop="danWei">

                    <mu-select v-model="en.danWei" full-width>
                        <mu-option v-for="item,index in danwei"
                                   :key="item.id" :label="item.name" :value="item.id"></mu-option>
                    </mu-select>
                </mu-form-item>
                <mu-form-item label="品牌" :rules="[rules.notNull]" prop="pinPai">

                    <mu-select v-model="en.pinPai" full-width>
                        <mu-option v-for="item,index in pinpai"
                                   :key="item.id" :label="item.name" :value="item.id"></mu-option>
                    </mu-select>
                </mu-form-item>
                <mu-form-item label="备注" :rules="[rules.notNull]" prop="tips">
                    <mu-text-field v-model="en.tips"></mu-text-field>
                </mu-form-item>

                <div class="fs8 c11 pad5 mart20">
                    <mu-button large full-width round color="primary" @click="submit()">保存提交</mu-button>
                </div>
            </div>
        </mu-form>
    </div>
    <div class="pad10" v-if="tab == 0">
        <div class="fs10 c11" v-if="isTrue(list)">
            <mu-ripple class="pad5 bdbda bc13 mart5 lh2 pos-r" v-for="item,index in list" @click="select(index)">
                <div class="flrc c2">
                    <div class=" padr5 padt2">
                        <mu-icon value="settings_input_component"></mu-icon>
                    </div>
                    <div class="flex3">[[item.Matter_name]]</div>
                </div>
                <div class="flrc fs8 c11">
                    <div>品牌:</div>
                    <div class="flex1">[[item.CC3_name]]</div>
                    <div>规格:</div>
                    <div class="flex1">[[item.CC1_name]]</div>
                    <div>单位:</div>
                    <div class="">[[item.CC2_name]]</div>
                </div>
                <div class="padb3 bdtda fs8 c12" v-if="isTrue(item.tips)">备注信息:[[item.Matter_tips]]</div>
            </mu-ripple>
        </div>
        <div class="mar10 pad10 c11 bdda tac" v-if="!isTrue(list)">
            暂无数据
        </div>
    </div>

    <mu-bottom-sheet :open.sync="open">
        <mu-list @item-click="">
            <mu-sub-header>请选择操作</mu-sub-header>
            <mu-list-item button @click="edit(index)">
                <mu-list-item-action>
                    <mu-icon value="edit" color="green"></mu-icon>
                </mu-list-item-action>
                <mu-list-item-title>编辑</mu-list-item-title>
            </mu-list-item>
            <mu-list-item button @click="del(index)">
                <mu-list-item-action>
                    <mu-icon value="delete_forever" color="blue"></mu-icon>
                </mu-list-item-action>
                <mu-list-item-title>删除</mu-list-item-title>
            </mu-list-item>
            <mu-list-item button @click="cancel">
                <mu-list-item-action>
                    <mu-icon value="power_settings_new" color="orange"></mu-icon>
                </mu-list-item-action>
                <mu-list-item-title>取消</mu-list-item-title>
            </mu-list-item>
        </mu-list>
    </mu-bottom-sheet>
{% endblock %}
